<template>
    <div class="nav">
        <ul>
            <!--
            vue2中将router-link标签转化为自定义标签的方法是
            <router-link tag="自定义的标签" to="页面跳转的地址"></router-link>
            -->
            <!--vue3中将router-link标签转化为自定义标签的方法-->
            <router-link custom to="/all" v-slot="{navigate, isExactActive}">
                <li @click="navigate" :class="isExactActive ? 'active': ''">全部</li>
            </router-link>
            <router-link custom to="/good" v-slot="{navigate, isExactActive}">
                <li @click="navigate" :class="isExactActive ? 'active': ''">精华</li>
            </router-link>
            <router-link custom to="/share" v-slot="{navigate, isExactActive}">
                <li @click="navigate" :class="isExactActive ? 'active': ''">分享</li>
            </router-link>
            <router-link custom to="/ask" v-slot="{navigate, isExactActive}">
                <li @click="navigate" :class="isExactActive ? 'active': ''">问答</li>
            </router-link>
            <router-link custom to="/job" v-slot="{navigate, isExactActive}">
                <li @click="navigate" :class="isExactActive ? 'active': ''">招聘</li>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
}
</script>

<style scoped lang="scss">
.nav {
    width: 100%;
    background-color: #f6f6f6;
    ul {
        display: flex;
        justify-content: space-around;
        color: #80bd01;
        align-items: center;
        height: 50px;
        font-size: 14px;
        .active {
            background-color: #80bd01;
            color: #fff;
            font-weight: bold;
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 4px;
        }
    }
}
</style>